{{define "cp_notifications_general"}}
{{template "cp_head" .}}
<header class="page-header">
    <h2>General</h2>
</header>

<form role="form" method="post" data-async-form>

    <section class="card mb-2">
        <div class="card-body mb-0">
            <div class="row">
                <div class="col">
                    {{template "template_help"}}
                </div>
            </div>
            <div class="row mt-4">
                <div class="col">
                    {{checkbox "censor_invites" "gnotifs-censor-invites" "Censor server invites in usernames?" .NotifyConfig.CensorInvites}}
                </div>
            </div>
        </div>
        <!-- /.col-lg-12 -->
    </section>

    {{template "cp_alerts" .}}

    <!-- /.row -->
    <div class="row">
        <div class="col-lg-12">
            <div class="row">
                <div class="col-lg-6">
                    <section
                        class="card {{if .NotifyConfig.JoinServerEnabled}}card-featured card-featured-success{{end}}">
                        <header class="card-header">
                            {{checkbox "join_server_enabled" "join-server-enabled-check" `<h2 class="card-title">Join message in server channel</h2>` .NotifyConfig.JoinServerEnabled}}
                        </header>
                        <div class="card-body">
                            <div class="form-group">
                                <label>Channel</label>
                                <select class="form-control" name="join_server_channel" data-requireperms-send>
                                    {{textChannelOptions .ActiveGuild.Channels .NotifyConfig.JoinServerChannel false ""}}
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="responses">Message (<span class="cc-length-counter">x</span>/5000)</label>
                                {{/* Use .btn-add for simplicity and let the page loader adjust. */}}
                                {{range .NotifyConfig.JoinServerMsgs}}
                                <div class="entry input-group input-group-sm">
                                    <textarea rows="5" class="form-control" name="join_server_msgs" oninput="onCCChanged(this)">{{.}}</textarea>
                                    <span class="input-group-append">
                                        <button class="btn btn-success btn-add btn-circle" type="button">
                                            <i class="fas fa-plus"></i>
                                        </button>
                                    </span>
                                </div>
                                {{else}}
                                <div class="entry input-group input-group-sm">
                                    <textarea rows="5" class="form-control" name="join_server_msgs" oninput="onCCChanged(this)"></textarea>
                                    <span class="input-group-append">
                                        <button class="btn btn-success btn-add btn-circle" type="button">
                                            <i class="fas fa-plus"></i>
                                        </button>
                                    </span>
                                </div>
                                {{end}}
                                <p class="help-block">Available template data is {{template "template_helper_user"}} and
                                    {{template "template_helper_guild"}}. YAGPDB will pick one message at random from
                                    all configured.</p>
                            </div>
                        </div>
                    </section>
                </div>
                <div class="col-lg-6">
                    <section class="card {{if .NotifyConfig.LeaveEnabled}}card-featured card-featured-success{{end}}">
                        <header class="card-header">
                            {{checkbox "leave_enabled" "leave_enabled" `<h2 class="card-title">User Leave Message</h2>` .NotifyConfig.LeaveEnabled}}
                        </header>
                        <div class="card-body">
                            <div class="form-group">
                                <label>Channel</label>
                                <select class="form-control" name="leave_channel" data-requireperms-send>
                                    {{textChannelOptions .ActiveGuild.Channels .NotifyConfig.LeaveChannel false ""}}
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="responses">Message (<span class="cc-length-counter">x</span>/5000)</label>
                                {{/* Use .btn-add for simplicity and let the page loader adjust. */}}
                                {{range .NotifyConfig.LeaveMsgs}}
                                <div class="entry input-group input-group-sm">
                                    <textarea rows="5" class="form-control" name="leave_msgs" oninput="onCCChanged(this)">{{.}}</textarea>
                                    <span class="input-group-append">
                                        <button class="btn btn-success btn-add btn-circle" type="button">
                                            <i class="fas fa-plus"></i>
                                        </button>
                                    </span>
                                </div>
                                {{else}}
                                <div class="entry input-group input-group-sm">
                                    <textarea rows="5" class="form-control" name="leave_msgs" oninput="onCCChanged(this)"></textarea>
                                    <span class="input-group-append">
                                        <button class="btn btn-success btn-add btn-circle" type="button">
                                            <i class="fas fa-plus"></i>
                                        </button>
                                    </span>
                                </div>
                                {{end}}
                                <p class="help-block">Available template data is {{template "template_helper_user"}} and
                                    {{template "template_helper_guild"}}. YAGPDB will pick one message at random from
                                    all configured.</p>
                            </div>
                        </div>
                    </section>
                </div>
                <!-- /.col-lg-6 (nested) -->
            </div>
            <div class="row mt-4">
                <div class="col-lg-6">
                    <section class="card {{if .NotifyConfig.JoinDMEnabled}}card-featured card-featured-success{{end}}">
                        <header class="card-header">
                            {{checkbox "join_dm_enabled" "join_dm_enabled" `<h2 class="card-title">Join message in direct message</h2>` .NotifyConfig.JoinDMEnabled}}
                        </header>
                        <div class="card-body">
                            <div class="form-group">
                                <label for="responses">Message (<span class="cc-length-counter">x</span>/5000)</label>
                                <textarea rows="5" class="form-control"
                                    name="join_dm_msg" oninput="onCCChanged(this)">{{.NotifyConfig.JoinDMMsg}}</textarea>
                                <p class="help-block">Available template data is {{template "template_helper_user"}} and
                                {{template "template_helper_guild"}}</p>
                        </div>
                    </div>
                    </section>
                </div>
                <div class="col-lg-6">
                    <section class="panel {{if .NotifyConfig.TopicEnabled}}card-featured card-featured-success{{end}}">
                        <header class="card-header">
                            {{checkbox "topic_enabled" "topic_enabled" `<h2 class="card-title">Topic change message</h2>` .NotifyConfig.TopicEnabled}}
                        </header>
                        <div class="card-body">
                            <div class="form-group">
                                <label>Channel</label>
                                <select class="form-control" name="topic_channel" data-requireperms-send>
                                    {{textChannelOptions .ActiveGuild.Channels .NotifyConfig.TopicChannel true "Channel topic was changed in"}}
                                </select>
                            </div>
                        </div>
                    </section>
                </div>
                <!-- /.col-lg-6 (nested) -->
            </div>
            <div class="row mt-4">
                <button type="submit" class="btn btn-primary btn-lg btn-block">Save</button>
            </div>
            <!-- /.row (nested) -->
            <!-- /.panel-body -->
            <!-- /.panel -->
        </div>
        <!-- /.col-lg-12 -->
    </div>
    <!-- /.row -->

</form>

<script type="text/javascript">
    function onCCChanged(textArea) {
        var textAreas = textArea.parentElement.parentElement.querySelectorAll("textarea")

        var combinedLength = 0;
        textAreas.forEach(function (elem) {
            combinedLength += elem.value.length;
            // The data received on the backend contains "\r\n" while it is simply "\n" on the JS side.
            // Adjust for this discrepancy by double-counting newline characters.
            const newlines = elem.value.match(/\n/g);
            if (newlines) combinedLength += newlines.length;
        })

        var display = textArea.parentElement.parentElement.querySelector(".cc-length-counter")
        display.textContent = combinedLength

        if (combinedLength > 5000) {
            display.classList.add("text-danger");
        } else {
            display.classList.remove("text-danger");
        }
    }
    $(document).off('click', '.btn-add').off('click', '.btn-remove');
    $(document).on('click', '.btn-add', function (e) {
      e.preventDefault();

      var currentEntry = $(this).parent().parent(),
        newEntry = $(currentEntry.clone()).insertAfter(currentEntry);

      newEntry.find('input, textarea').val('');
      newEntry.parent().find('.entry:not(:last-of-type) .btn-add')
        .removeClass('btn-add').addClass('btn-remove')
        .removeClass('btn-success').addClass('btn-danger')
        .html('<i class="fas fa-minus"></i>')
        .attr('noconfirm', 'true')
    }).on('click', '.btn-remove', function (e) {
      e.preventDefault();
      if (!confirm('Are you sure you want to delete this response? You will not be able to recover any unsaved changes.')) {
        return false;
      }else{
        $(this).parents('.entry:first').remove();
      }
      return true;
    });
</script>

{{template "cp_footer" .}}

{{end}}
